<!--
 * @Author: bsj
 * @Date: 2024-11-21
 * @LastEditors: baoshijie
 * @LastEditTime: 2024-11-25
 * @Description: 芯胶码
 * @FilePath: \computing-equipment\src\views\costParameterConfiguration\coreCode.vue
-->
<template>
    <div class="specificationConfiguration">
        <div class="optRow">
            <el-form :model="searchForm" ref="searchFormRef" :rules="rules" :inline="true"  label-width="80px">
                <el-form-item label="代码:" prop="specifications">
                    <el-input v-model="specifications" maxlength="10" placeholder="请输入代码进行搜索" style="width: 150px" />
                    <el-button type="primary" @click="newItem">搜索</el-button>
                </el-form-item>
                <el-form-item label="" prop="specifications">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 900px;" border stripe>
            <el-table-column type="index" width="60" label="序号"></el-table-column>
            <el-table-column prop="code" width="160" label="代码"></el-table-column>
            <el-table-column prop="coreAdhesivePrice" width="260" label="芯胶单价"></el-table-column>
            <el-table-column prop="coverGluePrice" width="260" label="盖胶单价"></el-table-column>
            <el-table-column prop="opt" width="160" label="操作">
                <template #default="scope">
                    <el-link type="primary" @click="editItem(scope.row)">编辑</el-link>
                    <el-link class="optBtn" type="danger" @click="deleteItem(scope.row, scope.$index)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" top="5vh">
            <el-form :model="optParams" ref="addRef" :rules="rules" :inline="false" size="small" label-width="120px">
                <el-form-item label="代码" prop="code">
                    <el-input v-model="optParams.code" maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="芯胶单价" prop="coreAdhesivePrice">
                    <el-input v-model="optParams.coreAdhesivePrice" maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="盖胶单价" prop="coverGluePrice">
                    <el-input v-model="optParams.coverGluePrice" maxlength="10" style="width: 200px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const addRef = ref(null)
const rules = {
    code: [
        { required: true, message: '请输入代码', trigger: 'blur' }
    ]
}
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const optParams = ref({
    code: '',
    coreAdhesivePrice: '',
    coverGluePrice: ''
})
const isEidt = ref(false)
const submitForm = () => {
    dialogVisible.value = false
    if (!isEidt.value) {
        tableData.value.push(optParams.value)
    }
}
const handleAdd = () => {
    isEidt.value = false
    dialogVisible.value = true
    optParams.value = {
        code: '',
        coreAdhesivePrice: '',
        coverGluePrice: ''
    }
}
const editItem = (row) => {
    isEidt.value = true
    dialogVisible.value = true
    optParams.value = row
}
const deleteItem = (row, index) => {
    ElMessageBox.confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除数据
        tableData.value.splice(index, 1);
    }).catch(() => { });
}
const tableData = ref([
    {
        code: 'A',
        coreAdhesivePrice: '2',
        coverGluePrice: '3'
    },
    {
        code: 'B',
        coreAdhesivePrice: '2',
        coverGluePrice: '3'
    }
])
</script>
<style scoped lang="scss">
.optRow {
    // margin-bottom: 20px;
}

.optBtn {
    margin: 0 20px;
}
</style>